/**
 * 热卖
 */
import React, {Component} from 'react';
import {Table, message, Breadcrumb, Select,Modal,
    Tag,Tooltip, Button, Input, Row, Col, Form, Upload, Popconfirm,Switch} from 'antd';
import {
    PlusOutlined,
    EditOutlined,
    DeleteOutlined,
    UploadOutlined

} from "@ant-design/icons";



import axios from "@src/lib/axios";
import "@src/style/tableCom.scss";
import "@src/style/common.scss";
import '@src/style/product.scss';
const {confirm} = Modal;
export default class Package extends Component {
    state = {
        params: {
            product_name: "",
            status: "",
            merchants_phone:"",
            page: 1,
            size: 15,
        },
        list: [],
        total: 0
    };


    UNSAFE_componentWillMount() {
        this.fetchData();
    }

    fetchData = () => {
        let {params} = this.state

        axios.post("/activity/hot/product/list", params).then(res => {
            if (res.code == 0) {
                this.setState({list: res.data.list})
            } else {
                message.warning(res.msg);
            }
        });
    }

    onSearch = (values) => {

        Object.assign(this.state.params, {...values})
        this.fetchData();
    }

    //删除
    delete = (id) => {
        console.log(id)
        axios.post('/activity/hot/product/del', {id: id}).then(res => {
            message.success(res.msg)
            this.fetchData();
        }).catch(res => {
            message.warning(res.msg)
        });
    }

    toEdit = (id) =>{
        console.log(id)
        this.props.history.push("/activity/edit",{id});
    }

    onChange = (id, val) => {
        //请求接口修改数据
        axios.post("/activity/hot/product/switch", {id, val}).then(res => {
            if (res.code === 0) {
                message.success("修改成功");
                this.fetchData();
            }
        });
    };


    showConfirm = (id, checked, nickName) => {
        const that = this;
        confirm({
            title: `是否${checked==1 ? '上架' : '下架'}${nickName}?`,
            content: '',
            okText: '确认',
            cancelText: '取消',
            style: {padding: '32px 20px'},
            onOk() {
                that.onChange(id, checked);
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    };


    onChangePage = (page) => {
        this.state.params.page = page;
        this.fetchData();
    };


    render() {
        let {list, total} = this.state

        const columns = [
            {title: "产品名称", width: 100, dataIndex: 'product_name', align: "center",ellipsis: {showTitle: false},render:(product_name) => {
                    return (
                        <Tooltip placement="topLeft" title={product_name}>
                            {product_name}
                        </Tooltip>
                    )
                }},
            {title: "状态", width: 20, dataIndex: "on_sale", align: "center",
                render: (text, record) => (
                    <div>
                    <Switch checkedChildren="上架" unCheckedChildren="下架"
                            onChange={() => this.showConfirm(record.hot_prd_id, record.on_sale == 2 ? 1 : 2, record.product_name)}
                            checked={text == 1 ? true : false} key={record.hot_prd_id}
                    />
                    </div>
                )
            },
            {title: "平台价", width: 30, dataIndex: 'platform_price', align: "center"},
            {title: "结算价", width: 30, dataIndex: 'settlement_price', align: "center"},
            // {title: "分销商佣金(%)", width: 30, dataIndex: 'rebate_m_percent', align: "center"},
            // {title: "直客佣金(%)", width: 30, dataIndex: "rebate_c_percent", align: "center"},
            {
                title: "操作", width: 40, dataIndex: "hot_prd_id", align: "center", fixed: 'right',render: (text, record) => {
                    return (
                        <Row>
                            <Col span={12}>
                            <Popconfirm
                                title="确认删除?"
                                okText="是"
                                cancelText="否"
                                onConfirm={() => this.delete(record.hot_prd_id)}
                            >
                                <Button type="link"><DeleteOutlined/>删除</Button>
                            </Popconfirm>
                            </Col>
                            <Col span={12}>
                            <Button type="link"  onClick={()=>this.toEdit(record.hot_prd_id)}><EditOutlined />编辑</Button>
                            </Col>
                        </Row>
                    )
                }
            }
        ]

        return (
            <div style={{padding: "0 15px 100px 15px", background: "#fff"}}>
                <div style={{padding: "10px 0px 1px 0px"}}>
                    <Breadcrumb>
                        <Breadcrumb.Item>产品管理</Breadcrumb.Item>
                        <Breadcrumb.Item>
                            <a href="">热卖商品</a>
                        </Breadcrumb.Item>
                    </Breadcrumb>
                </div>

                <Row style={{padding: "20px 0 0 0 "}}>
                    <Col span={24}>
                        <Form
                            size="small"
                            labelCol={{span: 6}}
                            wrapperCol={{span: 24}}
                            name="basic"
                            onFinish={this.onSearch}>
                            <Row gutter={24}>
                                <Col span={10}>
                                    <Form.Item colon={false} name="product_name">
                                        <Input placeholder="输入产品名称"/>
                                    </Form.Item>
                                </Col>
                                <Col span={3}>
                                    <Form.Item colon={false} name="merchants_phone">
                                        <Input placeholder="输入商家电话"/>
                                    </Form.Item>
                                </Col>
                                <Col span={3}>
                                    <Form.Item colon={false} name={"status"}>
                                        <Select placeholder="选择状态" style={{width: 120}} allowClear>
                                            <Select.Option value="1">上架</Select.Option>
                                            <Select.Option value="2">下架</Select.Option>
                                        </Select>
                                    </Form.Item>
                                </Col>
                                <Col span={8}>
                                    <Button type="primary" htmlType="submit">搜索</Button>
                                </Col>
                            </Row>
                        </Form>
                    </Col>
                </Row>
                <Row className="fields-box">
                    <Col span={12} style={{marginBottom: '20px'}}>
                        <Button type="primary"  onClick={()=>this.props.history.push('/activity/addOrEdit', {})}>添加</Button>
                    </Col>
                </Row>

                <Row>
                    <Col span={24}>
                        <Table
                            size="small"
                            columns={columns}
                            rowKey="hot_prd_id"
                            dataSource={list}
                            pagination={{
                                total: total,
                                pageSize: this.state.params.size,
                                current: this.state.params.page,
                                onChange: this.onChangePage
                            }}
                        />
                    </Col>
                </Row>
            </div>
        );
    }
}
